<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header alitem curr" @click="backChange">
        <el-icon size="24" style="cursor: pointer">
          <ArrowLeftBold />
        </el-icon>
        <span>编辑商品</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 1000px"
      :model="ruleForm"
      label-width="auto"
    >
      <el-form-item label="商品类型" prop="name" class="margintop">
        <el-button type="primary" plain>{{ ruleForm.bigTypeName }}</el-button>
      </el-form-item>
      <el-form-item label="商品名称" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品简介" prop="name" class="margintop">
        <el-input
          v-model="ruleForm.miniProgramDescription"
          type="textarea"
          :rows="5"
          placeholder="请输入商品名称"
        />
      </el-form-item>
      <el-form-item label="排序" prop="sort" class="mb20">
        <el-input-number v-model="ruleForm.sort" :min="0" />
      </el-form-item>
      <div class="flex">
        <el-form-item label="商品价格" prop="name" class="margintop">
          <el-input-number v-model="ruleForm.basePrice" :min="1" />
          <div style="color: rgb(164, 164, 164)">（价格设置需≥0.1元）</div>
        </el-form-item>
        <el-form-item
          label="折扣价格"
          prop="name"
          class="margintop"
          style="margin-left: 20px"
        >
          <el-input-number v-model="ruleForm.realPrice" :min="1" />
          <div style="color: rgb(164, 164, 164)">
            (折扣价为空，视为原价（价格设置需≥0.1元）
          </div>
        </el-form-item>
      </div>

      <el-form-item label="封面图片" prop="name" class="margintop">
        <ImageUpload
          :modelValue="modelValueList"
          :limit="1"
          @update:modelValue="modelValue"
        ></ImageUpload>
      </el-form-item>

      <el-form-item label="封面描述" prop="name" class="margintop">
        <el-input v-model="ruleForm.description" type="textarea" :rows="5" />
      </el-form-item>

      <el-form-item label="轮播图片" prop="name" class="margintop">
        <ImageUpload
          :modelValue="modelValueDateList"
          :limit="4"
          @update:modelValue="modelValuesChange"
        ></ImageUpload>
      </el-form-item>
      <el-form-item label="详情介绍(电脑版)" prop="name" class="margintop">
        <!-- <Editor
          :height="400"
          :modelValue="ruleForm.pcDescription"
          @update:modelValue="editorChange"
        ></Editor> -->
        <UEditorPlus
          :id="id1"
          v-model="ruleForm.pcDescription"
          :modelValue="ruleForm.pcDescription"
          @update:modelValue="editorChange"
        />
      </el-form-item>
      <el-form-item label="详情介绍(移动端)" prop="name" class="margintop">
        <!-- <Editor
          :height="400"
          :modelValue="ruleForm.appDescription"
          @update:modelValue="editorPhoneChange"
        ></Editor> -->
        <UEditorPlus
          :id="id2"
          v-model="ruleForm.appDescription"
          :modelValue="ruleForm.appDescription"
          @update:modelValue="editorPhoneChange"
        />
      </el-form-item>
      <el-form-item style="padding-left: 170px" class="margintop">
        <el-button
          type="primary"
          style="width: 170px"
          class="height40"
          @click="submitForm(ruleFormRef)"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { servicesCreate, servicesGet } from '@/api/service/service.js';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();
let ruleForm = ref({});
const modelValueList = ref([]);
const modelValueDateList = ref([]);
const id1 = 'etidorNewGood1';
const id2 = 'etidorNewGood2';

onMounted(() => {
  getService();
});
function editorChange(val) {
  ruleForm.value.pcDescription = val;
}
function editorPhoneChange(val) {
  // 移动端输入信息
  ruleForm.value.appDescription = val;
}
function modelValuesChange(val) {
  ruleForm.value.bannersPicUrl = val; // 保存多张图片
}
function modelValue(val) {
  ruleForm.value.picUrl = val; // 保存单张图片
}
// 获取详细信息
function getService() {
  servicesGet({ id: route.query.id }).then((res) => {
    if (res.code === 20000) {
      res.data.basePrice = res.data.basePrice * 1;
      res.data.realPrice = res.data.realPrice * 1;
      ruleForm.value = res.data;
      modelValueList.value = res.data.picUrl.split(','); // 封面图片
      modelValueDateList.value = res.data.bannersPicUrl.split(','); // banner图片
    }
  });
}
function submitForm() {
  servicesCreate({ ...ruleForm.value }).then((res) => {
    if (res.code === 20000) {
      ElMessage.success(res.msg);
      backChange(); // 返回上一级的页面
    }
  });
}

function backChange() {
  router.push('/operation/service');
}
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

:deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
